<template>
	<view class="p-[20rpx]">
		<!-- 到店自取  v-if="modes.orderInfo.orderStatus !==-2 && modes.orderInfo.orderStatus !==-1 && modes.orderInfo.orderStatus !== 0 && modes.orderInfo.orderStatus !==1   && modes.orderInfo.deliveryType == 3"-->
		<view v-if="modes.orderInfo.orderStatus !==5 && modes.orderInfo.orderStatus !==-2 && modes.orderInfo.orderStatus !==-1 && modes.orderInfo.orderStatus !== 0 && modes.orderInfo.orderStatus !== 7 && modes.orderInfo.orderStatus !==8 && modes.orderInfo.deliveryType == 3"   class="bg-[#fff] rounded-[20rpx] py-[40rpx] px-[20rpx]">
			<view class="flex justify-between">
				<view class="flex-1">
				<view class="flex items-start">
					<view class="">
						<image class="w-[35rpx] h-[41rpx] mr-[10rpx]" src="@/static/order/ordertime.png"></image>
					</view>
					<view class="leading-[41rpx]">
						<text class=" text-[#000000] text-[34rpx] font-bold"></text>
					</view>
					
				</view>	
				<view class="ml-[45rpx]">
					<up-text size="13" wordWrap :text="modes.orderInfo.storeName"></up-text>
				</view>
				</view>
				<view class="">
				<view class="bg-[#FE861C] px-[14rpx] py-[16rpx] rounded-[20rpx] text-[#fff]">
					<view class="">
						取餐码
					</view>
					<view class="flex justify-center">
						<view class="mr-[5rpx] text-[24rpx]">
							# 
						</view>
						<view class="text-[36rpx] font-bold">
							{{modes.orderInfo.dayNo}}
						</view>
					</view>
				</view>	
				</view>		
			</view>
			<u-line margin="20rpx  0" color="#efefef"></u-line>
			<view class="flex justify-end">
						<view class="w-[168rpx] mr-[20rpx]" >
							<up-button  @click="refundReason" text="申请退款" shape="circle" :hairline="true" :customStyle="{border:'1px solid  #D3D3D3',height:'62rpx'}"></up-button>
						</view>
						<view class="w-[168rpx] " >
							<up-button @click="notarize" color="#FE861C" text="确认收货" shape="circle" :hairline="true" :customStyle="{border:'1px solid  #FE861C',height:'62rpx'}"></up-button>
						</view>
					</view>
		
		</view>
		<!-- 待商家接单  -->
				<view v-if="modes.orderInfo.orderStatus == 0 && modes.orderInfo.payStatus ==  1"  class="bg-[#fff] rounded-[20rpx] py-[40rpx]">
					<view  class="flex items-center justify-center" >
						<image class="w-[35rpx] h-[41rpx] mr-[10rpx] mt-[0rpx]"  
						src="@/static/order/ordertime.png"></image>
						<text class=" text-[#000000] text-[34rpx] font-bold " >待商家接单</text>
					</view>
					<view class="">
						<up-text text="订单已付款，请耐心等待商家接单" color="#000000" size="13" align="center"
							margin="25rpx 0 40rpx 0"></up-text>
					</view>
					<!-- 商家未接单 直接退款 -->
					<view class="w-[168rpx] " style="margin: 0 auto;">
						<up-button  @click="modes.showRefund = true" text="取消订单" shape="circle" :hairline="true" :customStyle="{border:'1px solid  #D3D3D3',height:'62rpx'}"></up-button>
					</view>
				</view>
		
				<!-- 商家自配送 -->
				<view v-if="modes.orderInfo.deliveryType == 2 && modes.orderInfo.payStatus ==  1 && modes.orderInfo.orderStatus ===4" 
				 class="bg-[#fff] rounded-[20rpx] py-[40rpx] px-[20rpx] mt-[20rpx]">
					<view class="flex justify-between">
						<view class="flex flex-auto items-center justify-start">
							<image class="w-[35rpx] h-[41rpx] mr-[10rpx]" src="@/static/order/ordertime.png"></image>
							<text class=" text-[#000000] text-[34rpx] font-bold">商家配送中</text>
						</view>
		                 <!-- 商家已经接单 跳转退款原因 -->
						<!-- <view class="flex-none w-[165rpx]">
							<up-button  @click="refundReason" text="申请退款" shape="circle" :hairline="true" :customStyle="{border:'1px solid  #D3D3D3',height:'62rpx'}"></up-button>
						</view> -->
					</view>
				</view>
				<!-- 商家备餐中 -->
		       <view v-if="modes.orderInfo.deliveryType == 2 && modes.orderInfo.payStatus ==  1 && modes.orderInfo.orderStatus ===1"  class="bg-[#fff] rounded-[20rpx] py-[40rpx] px-[20rpx] mt-[20rpx]">
		       	<view class="flex justify-between">
		       		<view class="flex flex-auto items-center justify-start">
		       			<image class="w-[35rpx] h-[41rpx] mr-[10rpx] pb-[4rpx]" src="@/static/order/ordertime.png"></image>
		       			<text class=" text-[#000000] text-[34rpx] font-bold">商家备餐中</text>
		       		</view>
		                <!-- 商家已经接单 跳转退款原因 -->
		       		<view class="flex-1  flex" style="">
		       			<up-button v-if="modes.orderInfo.refundStatus == 0"  @click="refundReason" text="申请退款" shape="circle" :hairline="true" :customStyle="{border:'1px solid  #D3D3D3',height:'62rpx',marginRight:'20rpx',width:'165rpx'}"></up-button>
						<up-button v-if="modes.orderInfo.refundStatus == 1 || modes.orderInfo.refundStatus == 2 || modes.orderInfo.refundStatus == 3 || modes.orderInfo.refundStatus == 4" 
						 @click="goRefundInfo" 
						 text="退款详情" 
						 shape="circle" 
						 :hairline="true" 
						 :customStyle="{border:'1px solid  #D3D3D3',height:'62rpx',width:'165rpx'}"></up-button>
		       		</view>
		       	</view>
		       </view>
				<!-- 订单已完成 -->
				<view v-if="modes.orderInfo.orderStatus == 5" class="bg-[#fff] rounded-[20rpx] py-[40rpx] mt-[20rpx]">
					<view class="flex items-center justify-center">
						<image class="w-[41rpx] h-[41rpx] mr-[10rpx]" src="@/static/order/orderOk@2x.png"></image>
						<text class=" text-[#000000] text-[34rpx] font-bold">订单已完成</text>
					</view>
					<view class="">
						<up-text text="期待您的下次光临" color="#000000" size="13" align="center" margin="25rpx 0 40rpx 0"></up-text>
					</view>
					<view class="w-[168rpx] " style="margin: 0 auto;">
						<up-button @click="goStore" text="再次购买" shape="circle" :hairline="true" :customStyle="{border:'1px solid  #D3D3D3',height:'62rpx'}"></up-button>
					</view>
				</view>
		
				<!-- 订单超时 -->
				<view v-if="modes.orderInfo.orderStatus == -1 " class="bg-[#fff] rounded-[20rpx] py-[40rpx] mt-[0rpx] px-[20rpx]">
					<view class="flex items-center justify-start">
						<image class="w-[45rpx] h-[45rpx] ml-[-6rpx]" src="@/static/order/orderout.png"></image>
						<text class=" text-[#000000] text-[34rpx] font-bold">订单已取消</text>
					</view>
					<view class="mt-[10rpx]">
						<up-text v-if="modes.orderInfo.payStatus == 2" text="支付超时，订单已取消" color="#000000" size="13" align="left" ></up-text>
						<up-text v-if="modes.orderInfo.payStatus == 0" text="取消支付" color="#000000" size="13" align="left" ></up-text>
					</view>
					<u-line margin="20rpx 0 0 0" color="#efefef"></u-line>
					<view class=" flex justify-end mt-[30rpx]">
						<view class="mr-[20rpx]">
							<up-button @click="stroll" text="逛逛别家" shape="circle" :hairline="true" :customStyle="{border:'1px solid  #D3D3D3',height:'62rpx'}"></up-button>
						</view>
						<view class="">
							<up-button @click="navto('/page_index/storedetals?id=' + modes.orderInfo.storeId )" color="#FE861C" :plain="true" text="再来一单" shape="circle" :hairline="true" :customStyle="{border:'1px solid  #D3D3D3',height:'62rpx'}"></up-button>
						</view>
					</view>
				</view>
		
				<!-- 等待支付 -->
				<view v-if="modes.orderInfo.payStatus == 0 && modes.orderInfo.orderStatus !== -1" class="bg-[#fff] rounded-[20rpx] py-[40rpx] mt-[20rpx] px-[20rpx]">
					<view class="flex items-center justify-start">
						<image class="w-[35rpx] h-[41rpx] mr-[10rpx]" src="@/static/order/ordertime.png"></image>
						<view class="flex items-center">
							<view class="text-[#000000] text-[34rpx] font-bold">等待支付，剩余 </view>
							<view style="color:#FE861C;margin-top: 2rpx;">
								<!-- <u-count-down @change="onChange" style="color: #FE861C;" 
								:time="6540293" format="mm:ss">
									
								</u-count-down> -->
								<text style=""> {{minutes}}:{{seconds}}</text>
								
							</view>
						</view>
					</view>
					
		        <view class="mt-[10rpx]">
					<text class="text-[#FE861C] text-[26rpx]">超过15分钟未支付，</text>
		        	<text class="text-[#000000] text-[26rpx]">订单将被自动取消，快去支付吧。</text>
		        </view>
		
					<u-line margin="20rpx 0 0 0" color="#efefef"></u-line>
					<view class=" flex justify-end mt-[30rpx]">
						<view class="mr-[20rpx]">
							<up-button @click="modes.showCancel = true" text="取消订单" shape="circle" :hairline="true" :customStyle="{border:'1px solid  #D3D3D3',height:'62rpx'}"></up-button>
						</view>
						<view class="mr-[20rpx]">
							<up-button @click="navto('/page_order/orderDetalis/orderInfo/orderInfo?orderId=' + mode.orderNo)" text="修改订单" shape="circle" :hairline="true" :customStyle="{border:'1px solid  #D3D3D3',height:'62rpx'}"></up-button>
						</view>
						<view class="">
							<up-button @click="payNow" color="#FE861C" :plain="true" text="立即支付" shape="circle" :hairline="true" :customStyle="{border:'1px solid  #D3D3D3',height:'62rpx'}"></up-button>
						</view>
					</view>
				</view>
		

		
		<!--退款成功 -->
		<view v-if="modes.orderInfo.orderStatus == 7 || modes.orderInfo.orderStatus == -2 || modes.orderInfo.orderStatus  === 8" class="bg-[#fff] rounded-[20rpx] py-[40rpx] mt-[20rpx]">
			<view class="flex justify-end items-center pr-[10rpx]" @click="refundDetails">
				<text class="text-[#707070] text-[26rpx]">退款详情</text>
				<view class="">
					<u-icon top="0rpx" name="arrow-right" size="13"></u-icon>
				</view>
			</view>
			<view class="flex items-center justify-center">
				<image class="w-[41rpx] h-[41rpx] mr-[10rpx]" src="@/static/order/reasonSuccess@2x.png"></image>
				<text class=" text-[#000000] text-[34rpx] font-bold">退款成功</text>
			</view>
			<view class="" v-if="modes.orderInfo.orderStatus == 7 || modes.orderInfo.orderStatus ===8">
				<up-text text="期待您的下次光临" color="#000000" size="13" align="center" margin="25rpx 0 40rpx 0"></up-text>
			</view>
			<view class="" v-if="modes.orderInfo.orderStatus == -2">
				<up-text text="拒绝接单并退款" color="#000000" size="13" align="center" margin="25rpx 0 40rpx 0"></up-text>
			</view>
			<view class="w-[168rpx] " style="margin: 0 auto;">
				<up-button @click="goStore" text="再次购买" shape="circle" :hairline="true"  :customStyle="{border:'1px solid  #D3D3D3',height:'66rpx'}"></up-button>
			</view>
		</view>
	
	 <!-- 商品详情 -->
	<order-list :data="orderlist" @gophone="goPhone()"  @goStore="goStore()" ></order-list>
	 <!-- 订单信息 -->
	 <order-info :data="data" ></order-info>
	 
	 <!-- 取消订单窗口 -->
	 <u-modal 
	 :show="modes.showCancel" 
	 @confirm="confirmCancel"
	 @cancel = "modes.showCancel =false"
	 title="取消订单" 
	 content='确定要取消当前订单吗？'
	 showCancelButton></u-modal>
	 <!-- 退款窗口 -->
	 <u-modal
	 :show="modes.showRefund" 
	 @confirm="confirmRefund"
	 @cancel = "modes.showRefund =false"
	 title="取消订单" 
	 content='确定要取消当前订单吗？'
	 showCancelButton></u-modal>
	</view>



</template>

<script setup>
import orderInfo from "@/components/orderInfo/orderInfo.vue"
import  orderList  from "@/components/orderlist/orderlist.vue"
import dayjs from 'dayjs';
	import {
		ref,
		reactive,
		onMounted,
		computed
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		oredrDitils,
		ordercancel,
        refund,//申请退款
         orderOver//完成订单
	} from "@/api/order.js"

	const min = ref()
	const sec = ref()

	const mode = ref({ //发送的数据
		orderNo:'',//订单号
		
	})
	const modes = ref({  //获取接受的数据
		orderGoods:[],//订单商品
		orderInfo:{   //订单信息
			
		},
		showCancel:false,//取消订单的窗口
		showRefund:false,//退款敞口
		payType:'',
		totle:''
	})
	onLoad((e)=>{
		mode.value.orderNo = e.orderNo
		
	})
	onShow(()=>{
		
			getOrederDetails()//订单详情	
		
	
		
	})
	//确认收货
	const notarize = ()=>{
		orderOver({orderId:mode.value.orderNo}).then(res=>{
			if(res.code == 200){
				uni.showToast({
					title:res.msg,
					icon:'none'
				})
				getOrederDetails()
			}
		})
	}
	//拨打电话
	const goPhone = ()=>{
		uni.makePhoneCall({
			phoneNumber:phone.value
		})
		console.log("拨打电话啊",phone.value);
	}
	//跳转商户
	const goStore = ()=>{
		uni.navigateTo({
			url:'/page_index/storedetals?id=' + modes.value.orderInfo.storeId
		})
		
	}
	//未付款时取消订单点击确认
	const  confirmCancel = ()=>{
		ordercancel({orderId:mode.value.orderNo}).then(res=>{
			if(res.code == 200){
				uni.showToast({
					title:res.msg,
					icon:'none'
				})
				// getOrederDetails()
				uni.switchTab({
					url:'/pages/order/order'
				})  
				modes.value.showCancel = false
			}
		})
	}
	//退款
	const  confirmRefund = ()=>{
		refund({orderId:mode.value.orderNo}).then(res=>{
			if(res.code == 200){
				uni.showToast({
					title:res.msg,
					icon:'none'
				})
				// getOrederDetails()
				uni.switchTab({
					url:'/pages/order/order'
				})
				modes.value.showRefund = false
			}
		})
	}
	//订单商品
	const orderlist = ref({
		    show:true,
			tradeName:"",
			distributionMode:"",
			num:"",
			orderList:[{
				orderPicture:"",
				specification:"",
				singleorderNum:"",
				name:"",
				singlePrice:"",
			}],
			balingCharge:"",
			deliveryFee:'',
			servicePrice:'',
			totalPrice:''
	})
	
	//订单信息
	const data = ref({})
	const phone = ref({
	
	})
	
	//获取订单详情
	const createdAt = ref()
	const getOrederDetails = ()=>{
		orderlist.value.orderList = []
		oredrDitils({orderId:mode.value.orderNo}).then(res=>{
			createdAt.value =  res.result.orderInfo.createdAt //获取的创建时间
			modes.value.orderGoods = res.result.orderGoods
			modes.value.orderInfo = res.result.orderInfo
			modes.value.payType = res.result.orderInfo.payType
			data.value = res.result.orderInfo
			phone.value = res.result.storeInfo.phone
			orderlist.value.tradeName = res.result.orderInfo.storeName //店铺名称
			 orderlist.value.balingCharge = res.result.orderInfo.packagePrice //打包费`
			orderlist.value.deliveryFee = res.result.orderInfo.deliveryFee //配送费
			//orderlist.value.servicePrice=0, //服务费
			orderlist.value.totalPrice=res.result.orderInfo.totalPrice //所有商品总价
			res.result.orderGoods.forEach(item => { //商品列表
				   orderlist.value.orderList.push({
					goodsImages: item.goodsImages[0], //商品图片1
					goodsName: item.goodsName,//商品名称2
					singleorderNum: item.goodsNum,//商品数量1
					specification: item.goodsSpecSuk,//商品规格1
					subtotalPrice: item.totalPrice,//当前商品价格1
					batchingIds: item.batchings,//商品配料1
				})
			
				
			// // console.log("res.result.orderGoods", orderGoods.value);
			})
			console.log("当前订单详情",createdAt.value );
		})
	}
	//跳转页面
	//跳转页面
	const navto = (url) => {
		uni.navigateTo({
			url: url
		})
	}
	
	

	
	
	//申请退款
	let refundReason = ()=>{
		uni.navigateTo({
			url:'/page_order/Applyrefund/Applyrefund?orderId=' + mode.value.orderNo
		})
	}
	//退款详情
	let goRefundInfo = ()=>{
		uni.navigateTo({
			url:'/page_order/Applyrefund/RefundSuccessful/successPrice?orderId=' + mode.value.orderNo + '&phone=' + phone.value
		})
	}
	//再次购买
	let buyAgain = ()=>{
		uni.navigateTo({
			url:'/page_index/storedetals'
		})
	}
	
	//逛逛别家
	let stroll = ()=>{
		uni.switchTab({
			url:'/pages/index/index'
		})
	}
	
	//修改订单
	let editOrder = ()=>{
		uni.navigateTo({
			url:'/page_order/orderDetalis/orderInfo/orderInfo'
		})
	}
	
	//立即支付
	let payNow = ()=>{
		uni.navigateTo({
			url:'/page_order/submitanorder/payment/payment?orderId=' 
				+ mode.value.orderNo + '&patType=' 
				+ modes.value.payType + '&totle='
				+ orderlist.value.totalPrice + '&createdAt=' + createdAt.value
		})
	}
	
	//退款详情
	let refundDetails= ()=>{
		uni.navigateTo({
			url:'/page_order/Applyrefund/RefundSuccessful/successPrice?orderId=' + mode.value.orderNo
		})
	}
	
	


	setTimeout(()=>{
		console.log("createdAt",createdAt.value);
		
		// 后端传来的时间字符串
		// let backendTime = '2024-02-02 16:10:39'
		
		// 将后端时间转换为Date对象
		let targetTime = new Date(createdAt.value+'');
		
		// 在目标时间上增加15分钟
		targetTime.setMinutes(targetTime.getMinutes() + 15);
		
		// 获取当前时间
		let currentTime = new Date();
		
		// 计算时间差（单位：毫秒）
		let timeDiff = targetTime.getTime() - currentTime.getTime();
		 console.log("计算时间差",timeDiff);
		 let countdown = setInterval(function() {
		   // 获取当前时间
		   let now = new Date();
		 
		   // 计算剩余时间差（单位：毫秒）
		   let remainingTime = targetTime.getTime() - now.getTime();
		 
		   // 倒计时结束
		   if (remainingTime <= 0) {
		     clearInterval(countdown);
		     console.log("倒计时结束");
		     return;
		   }
		 
		   // 计算剩余时、分、秒
		   let minutes = Math.floor((remainingTime / (1000 * 60)) % 60);
		   let seconds = Math.floor((remainingTime / 1000) % 60);
		   // 输出倒计时时间
		     min.value = minutes.toString().padStart(2, '0');
		      sec.value = seconds.toString().padStart(2, '0');
		   console.log(`倒计时：${minutes} 分钟 ${seconds} 秒`);
		 }, 1000);
	},500)
	
	// 计算属性
	const minutes = computed(()=>{  
		return  min.value
	})
	const seconds = computed(()=>{ 
		return  sec.value
	})
</script>

<style lang="scss" scoped>
::v-deep .u-cell__body.data-v-3fd6feca {
   padding: 10rpx 20rpx;
    align-items: start;
}
::v-deep .u-cell-group__title__text.data-v-014d39dc {
    font-size: 32rpx;
    line-height: 16px;
    color: #000000;
}
::v-deep .u-cell-group__title.data-v-014d39dc {
    padding: 20rpx 20rpx 10rpx 20rpx;
	font-weight: 500;
}
::v-deep .u-text.data-v-0a574502 {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    flex: 1;
    width: 100%;
    padding-top: 2px;
}
::v-deep .u-button__text.data-v-5ce41ee6 {
    white-space: nowrap;
    line-height: 0 !important;
	padding-top: 2rpx;
	
}
</style>